import * as THREE from "three";

import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
import { scene, batteryGroup, css3dLabelGroup } from "./threeObj";
import { CSS3DSprite } from "three/examples/jsm/renderers/css3drenderer";
import $ from "jquery";

export function loaderModel() {
  let url = "static/model/Bettery_250114B.glb";
  const loader = new GLTFLoader();
  const dracoLoader = new DRACOLoader();
  dracoLoader.setDecoderPath("static/draco/");
  loader.setDRACOLoader(dracoLoader);
  const hdrEquirect = new RGBELoader()
    .setPath("static/hdr/")
    .load("brown_photostudio_02_2k.hdr", function (texture) {
      hdrEquirect.mapping = THREE.EquirectangularReflectionMapping;
      // scene.background = texture;
      scene.environment = texture;
    });
  loader.load(url, (gltf) => {
    let gltfs = gltf.scene;
    gltfs.children.map((item) => {
      let child = item.clone();
      if (child.name == "BiaoQian") {
        child.children.map((item) => {
          item.position.x += 24;
          item.position.y += 24.86;
          item.position.z -= 19.8;
          console.log(item, item.name);

          createLabel(item, item.name);
        });
        child.visible = false;
      } else if (
        child.name.indexOf("00-") != -1 ||
        child.name.indexOf("01-") != -1 ||
        child.name.indexOf("02-") != -1 ||
        child.name.indexOf("03-") != -1
      ) {
        child.traverse((childItem) => {
          if (childItem.type == "Mesh") {
            childItem.userData.material = childItem.material.clone();
          }
        });
        batteryGroup.add(child);
      } else {
        scene.add(child);
      }
    });
  });
}

const createLabel = (item, label, className = "default") => {
  let html = `<div class="labelTitles ${className} ${label}">
            <div class="title">
                <span>${label.slice(3)}</span>
                <div class="closeIcon" onClick='closeLabel("${label}",event)'></div>
            </div>
             <div class="center">
              <div class="name centerCenter">
                  <span class="labelTitle">温度：</span>
                  <span class="labelNr labelNrwd default">65.6℃</span>
                  
              </div>
              <div class="hw centerCenter">
                  <span class="labelTitle">应变：</span>
                  <span class="labelyb default">18με</span>
              </div>
              <div class="bjzt centerCenter">
                  <span class="labelTitle">监测状态：</span>
                  <span class="labelNr labelNrZtWd default ">
                   温度正常
                  </span>
                  <span class="labelNr labelNrZtYb default ">
                   应变正常
                  </span>
              </div>
            </div> 
    </div>`;
  let css3dLabel = new CSS3DSprite($(html)[0]);
  css3dLabel.position.x = item.position.x;
  css3dLabel.position.y = item.position.y + 0.5;
  css3dLabel.position.z = item.position.z;
  css3dLabel.name = label;
  css3dLabel.scale.set(0.05, 0.05, 0.05);
  css3dLabel.visible = false;
  css3dLabel.userData.click = false;
  //css3dLabel.rotateY(Math.PI)
  css3dLabelGroup.add(css3dLabel);
};
